<template>
  <div class="news-comment-container">
        <!-- 评论列表 -->
        <div class="comment" v-for="(item,index) in comments" :key="index">
            <!-- 评论用户 -->
            <div class="info">
                <template>
                    <img  v-if="+user.sex===0"
                        src="../../assets/pic/头像 男孩.png"
                        width="36"
                        height="36">
                    <img  v-else
                        src="../../assets/pic/头像 女孩.png"
                        width="36"
                        height="36">
                </template>
                <div class="right">
                    <div class="name">{{item.author}}</div>
                    <div class="date">{{index+1}}楼 · {{date}}</div>
                </div>
            </div>
            <!-- 评论内容 -->
            <div class="content">{{item.content}}</div>

            <div class="control">
                <span class="comment-reply">
                    <span>回复</span>
                    <i class="el-icon-chat-dot-round"></i>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
  
  export default {
    name: 'news-comment',
    props: {
      comments: {
        type: Array,
        required: true
      }
    },
    components: {},
    data() {
      return {
        inputComment: '',
        showInput: false,
        checkComment:{
          id:null,
          name:'',
          replyList:[],
        },
        date:(new Date()).toLocaleDateString()
      }
    },
    computed: {
      ...mapState(['user','showUserDialog','isLogin']),
    },
    methods: {
      //点击取消按钮
      cancel() {
        this.showInput =false;
        this.inputComment='';
        this.checkComment={};
      }
    },
  };
</script>

<style lang="scss" scoped>
  $color-main: #409EFF;
  $color-success: #67C23A;
  $color-warning: #E6A23C;
  $color-danger: #F56C6C;
  $color-info: #909399;
  
  $text-main: #303133;
  $text-normal: #606266;
  $text-minor: #909399;  //次要文字
  $text-placeholder: #C0C4CC;
  $text-333: #333;
  
  $border-first: #DCDFE6;
  $border-second: #E4E7ED;
  $border-third: #EBEEF5;
  $border-fourth: #F2F6FC;
  
  $content-bg-color: #fff;
  
.news-comment-container {
         padding: 0 10px;
         box-sizing: border-box;
         .comment {
           display: flex;
           flex-direction: column;
           padding: 10px;
           border-bottom: 1px solid $border-fourth;
           .info {
             display: flex;
             align-items: center;
            //  .avatar {
            //    border-radius: 50%;
            //  }
             .right {
               display: flex;
               flex-direction: column;
               margin-left: 10px;
               .name {
                 font-size: 16px;
                 color: $text-main;
                 margin-bottom: 5px;
                 font-weight: 500;
               }
               .date {
                 font-size: 12px;
                 color: $text-minor;
               }
             }
           }
           .content {
             font-size: 16px;
             color: $text-main;
             line-height: 20px;
             padding: 10px 0;
           }
           .control {
             display: flex;
             flex-direction: row-reverse;
             align-items: right;
             font-size: 14px;
             color: $text-minor;
             .like {
               display: flex;
               align-items: center;
               margin-right: 20px;
               cursor: pointer;
               &.active, &:hover {
                 color: $color-main;
               }
               .iconfont {
                 font-size: 14px;
                 margin-right: 5px;
               }
             }
             .comment-reply {
               display: flex;
               align-items: center;
               cursor: pointer;
               &:hover {
                 color: $text-333;
               }
               .iconfont {
                 font-size: 16px;
                 margin-right: 5px;
               }
             }
        
           }
           .reply {
                margin: 10px 0;
                border-left: 2px solid $border-first;
                .item {
                    margin: 0 10px;
                    padding: 10px 0;
                    border-bottom: 1px dashed $border-third;
                    .reply-content {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: $text-main;
                        .from-name {
                            color: $color-main;
                        }
                        .to-name {
                            color: $color-main;
                            margin-left: 5px;
                            margin-right: 5px;
                        }
                    }
                    .reply-bottom {
                        display: flex;
                        align-items: center;
                        margin-top: 6px;
                        font-size: 12px;
                        color: $text-minor;
                        .reply-text {
                            display: flex;
                            align-items: center;
                            margin-left: 10px;
                            cursor: pointer;
                            &:hover {
                                color: $text-333;
                            }
                            .icon-comment {
                                margin-right: 5px;
                            }
                        }
                    }
                }
                .write-reply {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: $text-minor;
                    padding: 10px;
                    cursor: pointer;
                    &:hover {
                        color: $text-main;
                    }
                    .el-icon-edit {
                        margin-right: 5px;
                    }
                }
                .fade-enter-active, fade-leave-active {
                    transition: opacity 0.5s;
                }
                .fade-enter, .fade-leave-to {
                    opacity: 0;
                }
                .input-wrapper {
                    padding: 10px;
                    .gray-bg-input, .el-input__inner {
                        /*background-color: #67C23A;*/
                    }
                    .btn-control {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding-top: 10px;
                        .cancel {
                            font-size: 16px;
                            color: $text-normal;
                            margin-right: 20px;
                            cursor: pointer;
                            &:hover {
                                color: $text-333;
                            }
                        }
                        .confirm {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
</style>